<template>
  <div class="admin-layout">
    <el-container>
      <el-aside width="240px">
        <!-- 管理员信息 -->
        <div class="admin-info">
          <el-avatar :size="64" src="https://cube.elemecdn.com/0/88/03b0d4ff20bdb287dd6cb9l7849picbend.png" />
          <h3>管理员</h3>
          <el-tag size="small" type="primary">管理员</el-tag>
        </div>

        <!-- 导航菜单 -->
        <el-menu
          :default-active="activeMenu"
          class="el-menu-vertical"
          :router="true"
        >
          <el-menu-item index="/admin/profile">
            <el-icon><User /></el-icon>
            <span>个人中心</span>
          </el-menu-item>
          <el-menu-item index="/admin/dashboard">
            <el-icon><DataLine /></el-icon>
            <span>数据看板</span>
          </el-menu-item>
           <el-menu-item index="/admin/settings">
            <el-icon><Setting /></el-icon>
            <span>账号设置</span>
          </el-menu-item>
          <el-menu-item index="/admin/user-manage">
            <el-icon><Management /></el-icon>
            <span>用户管理</span>
          </el-menu-item>
          <el-menu-item index="/admin/system-settings">
            <el-icon><Setting /></el-icon>
            <span>系统设置</span>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <el-main>
        <router-view />
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import {
  User,
  Setting,
  Management, // 导入 Management 图标
  Reading,    // 导入 Reading 图标
  Connection,  // 导入 Connection 图标
  DataLine // 导入 DataLine 图标
} from '@element-plus/icons-vue'

const route = useRoute()

// 当前激活的菜单
const activeMenu = computed(() => {
  return route.path
})
</script>

<style scoped>
.admin-layout {
  height: 100vh;
  background-color: var(--el-bg-color);
}

.el-container {
  height: 100%;
}

.el-aside {
  background-color: var(--el-bg-color-overlay);
  border-right: 1px solid var(--el-border-color-light);
  display: flex;
  flex-direction: column;
}

.admin-info {
  padding: 20px;
  text-align: center;
  border-bottom: 1px solid var(--el-border-color-light);
}

.admin-info h3 {
  margin: 10px 0 5px;
  font-size: 16px;
  color: var(--el-text-color-primary);
}

.el-menu-vertical {
  border-right: none;
  flex: 1;
}

.el-menu-vertical:not(.el-menu--collapse) {
  width: 240px;
}

.el-main {
  padding: 20px;
  background-color: var(--el-bg-color-page);
}
</style> 